<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>注册用户</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>
		<style type="text/css">
			#nb {
				position: fixed;
				left: 550px;
				top: 200px;
			}

			* {
				margin: 0px;
				padding: 0px;
			}

			#yhm {
				font-size: 12px;
			}

			#zhuce {
				position: relative;
				top: 0px;
			}

			#y1,
			#y2,
			#y3 {
				margin: 50px;
			}


			#banner-container {
				position: relative;
				top: 20px;
				left: 835px;
				/* top: 50%;
			    left: 50%; */
				transform: translate(-50%, -50%);
				width: 100%;
				/* 根据需要调整横幅的宽度 */
				background-color: #f0f0f0;
				padding: 10px;
				border: 1px solid #ccc;
				text-align: center;
				white-space: nowrap;
				/* 禁止内容换行 */
			}

			marquee {
				width: 700px;
				/* 使横幅内容占满容器宽度 */
			}

			.el-form-item__label {
				font-size: 20px;
			}
		</style>
	</head>

	<body>

		<div id="app">
			<div id="banner-container">
				<marquee behavior="scroll" direction="left">
					<!-- 这里放置横幅内容 -->
					欢迎访问我们的注册页面！
				</marquee>
			</div>
			<div id="nb">
				<div id="zhuce" style="position: relative;left: 285px;top: 10px;
				 font-size: 30px; color: rgba(52, 58, 64, 0.75);font-family: '宋体';">
					<h2>注册</h2>
				</div>

				<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
					<el-form-item label="用户名" prop="sysusername" id="y1">
						<el-input v-model="formData.sysusername" placeholder="请输入用户名" clearable
							:style="{width: '360px'}" prefix-icon="el-icon-user-solid"></el-input>
					</el-form-item>

					<el-form-item label="密码" prop="sysuserpwd" id="y2">
						<el-input v-model="formData.sysuserpwd" placeholder="请输入密码" clearable :style="{width: '360px'}"
							:type="showPassword ? 'text' : 'password'" prefix-icon="el-icon-warning">
							<template v-slot:append>
								<el-button icon="el-icon-view" @click="toggleShowPassword"></el-button>
							</template>
						</el-input>
					</el-form-item>


					<el-form-item label="确认密码" prop="ppwwdd" id="y3">
						<el-input v-model="formData.ppwwdd" placeholder="请输入密码" clearable :style="{width: '360px'}"
							:type="showPassword ? 'text' : 'password'" prefix-icon="el-icon-star-on"></el-input>
					</el-form-item>



					<el-form-item size="large" style="margin-left: 50px;">
						<el-button type="primary" @click="submitForm" style="margin-right: 25px;">注册</el-button>
						<el-button @click="resetForm" style="margin-right: 25px;">重置</el-button>
						<el-button @click="goToLogin">返回登录</el-button>
					</el-form-item>
				</el-form>

			</div>
		</div>

		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					formData: {
						sysusername: undefined,
						sysuserpwd: undefined,
						ppwwdd: undefined,
					},
					formData2: {
						sysusername: undefined,
						sysuserpwd: undefined,
					},

					parentidoptions: [],
					rules: {
						sysusername: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}],
						sysuserpwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}],
						ppwwdd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}],
					},
					showPassword: false,
				},


				mounted() {
					/* this.getParentMent()
					this.getCode() */
				},
				methods: {
					toggleShowPassword() {
						this.showPassword = !this.showPassword;
					},
					submitForm() {
						//alert(JSON.stringify(this.formData));
						//数据提交
						/* alert(JSON.stringify(this.formData.sysuserpwd));
						alert(JSON.stringify(this.formData.ppwwdd)); */
						if (this.formData.sysuserpwd == this.formData.ppwwdd && this.formData.ppwwdd != null) {
							var that = this
							axios.post(HTTP + "user/add", this.formData).then(function(res) {
								if (res.data.code == 200) {
									//提交
									that.$message('注册成功!')
									window.location.href = "../wz/login.html"; // 跳转到登录页面
									that.$router.go(0)
								}
							}).catch(err => {
								console.log(err)
							});
						} else {
							this.$message("两次密码输入不一致，请重新输入");
						}
					},
					resetForm() {
						this.$refs['elForm'].resetFields()
					},
					goToLogin() {
						window.location.href = "../wz/login.html"; // 跳转到登录页面
					}
				}
			})
		</script>

	</body>

</html>